<template>
	<view class="serviceReservation" :style="{minHeight:hei+'px'}" v-if=" list != null ">
		<!-- <image class="reservationBj" src="/static/tabBar/bj.png" mode=""></image> -->
		<view class="reservationBj"></view>
		<!-- 染养系列 -->
		<view class="RYList listBox" v-if="list[0].secondary.length != 0" style="margin-top: 90rpx;">
			<!-- 头部 -->
			<view class="title flex-r-s-c">
				<image :src="url + list[0].img" mode=""></image>
				<view class="text">{{list[0].name}}</view>
			</view>
			<!-- 内容列表 -->
			<view class="list flex-r-b-c" v-for="(item,index) in list[0].secondary" :key="index"
				@tap.stop="serviceId(item.id,0,item.type,item.sminute)">
				<image :src="url + item.image"></image>
				<view class="list_r">
					<view class="name">{{item.sname}}</view>
					<view class="time">服务时间<text
							style="display: inline-block; color: #FF6C1D;">{{item.sminute}}</text>分钟
					</view>
					<view class="frequency">剩余<text style="display: inline-block; color: #FF6C1D;">{{item.num}}</text>次
					</view>
					<image class="checkbox"
						:src=" item.type == 0 ? '/static/tabBar/icon-wxz.png' : '/static/tabBar/icon-xz.png' " mode="">
					</image>
				</view>
			</view>
		</view>

		<!-- 剪烫系列 -->
		<view class="RYList listBox" v-if="list[1].secondary.length != 0">
			<!-- 头部 -->
			<view class="title flex-r-s-c">
				<image :src="url + list[1].img" mode=""></image>
				<view class="text">{{list[1].name}}</view>
			</view>
			<!-- 内容列表 -->
			<view class="list flex-r-b-c" v-for="(item,index) in list[1].secondary" :key="index"
				@tap="serviceId(item.id,1,item.type,item.sminute)">
				<image :src="url + item.image"></image>
				<view class="list_r">
					<view class="name">{{item.sname}}</view>
					<view class="time">服务时间<text
							style="display: inline-block; color: #FF6C1D;">{{item.sminute}}</text>分钟
					</view>
					<view class="frequency">剩余<text style="display: inline-block; color: #FF6C1D;">{{item.num}}</text>次
					</view>
					<image class="checkbox"
						:src="item.type == 0 ? '/static/tabBar/icon-wxz.png' : '/static/tabBar/icon-xz.png'" mode="">
					</image>
				</view>
			</view>
		</view>

		<!-- 美容系列 -->
		<view class="JTList listBox" v-if="list[2].secondary.length != 0">
			<!-- 头部 -->
			<view class="title flex-r-s-c">
				<image :src="url + list[2].img" mode=""></image>
				<view class="text">{{list[2].name}}</view>
			</view>
			<!-- 内容列表 -->
			<view class="list flex-r-b-c" v-for="(item,index) in list[2].secondary" :key="index"
				@tap="serviceId(item.id,2,item.type,item.sminute)">
				<image :src="url + item.image"></image>
				<view class="list_r">
					<view class="name">{{item.sname}}</view>
					<view class="time">服务时间<text
							style="display: inline-block; color: #FF6C1D;">{{item.sminute}}</text>分钟
					</view>
					<view class="frequency">剩余<text style="display: inline-block; color: #FF6C1D;">{{item.num}}</text>次
					</view>
					<image class="checkbox"
						:src="item.type == 0 ? '/static/tabBar/icon-wxz.png' : '/static/tabBar/icon-xz.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view style="width: 100%; box-sizing: border-box; padding-bottom: 200rpx;"></view>
		<view style="background-color:#FFFFFF;" class="nextStep">
			<view class="nextStepBtn" @click="fun_service_id">下一步</view>
		</view>
	</view>
	<view class="serviceReservation" :style="{minHeight:hei+'px'}" v-else>
		<image style="width: 100%; margin-top: 30%;" src="../../../static/icon/icon-xm@2x.png" mode="widthFix"></image>
		<view
			style="width: 100%; text-align: center; font-size: 44rpx; font-weight: 400; color: #333333; margin-top: 30rpx;">
			暂 无 项 目</view>
		<view
			style="width: 100%; text-align: center; font-size: 32rpx; font-weight: 400; color: #333333; margin-top: 40rpx;">
			请于商城中心去购买服务项目再进行预约！</view>
		<!-- <view
			style="width: 80%; height: 88rpx; line-height: 88rpx; text-align: center; border-radius: 88rpx; background-color: #45806E; color: #FFFFFF; font-size: 32rpx; font-weight: 500; position: fixed; left: 50%; bottom: 50rpx; transform: translateX(-50%);"
			@click="goIndex">确定</view> -->
			<view class="" style=" width: 100%;height: 200rpx;"></view>
			<view class="cart_box_btn flex-r-b-c" style=" width: 90vw; left: 50% !important; transform: translateX(-50%); background-color: #fff0!important;">
				<view class="view1_btn flex-c-c-c" style=" width: 50%; background-color: #fff0!important;">
					<view class="flex-c-c-c" @tap="goIndex(2)" style="width: 100%; border: 1px solid #45806E; background-color: #fff; border-top-left-radius: 100rpx; border-bottom-left-radius: 100rpx;">
						<text style="color: #999;">返回首页</text>
					</view>
				</view>
				<view class="view1_btn flex-c-c-c" style=" width: 50%; background-color: #fff0!important;">
					<view class="flex-c-c-c" @tap="goIndex(1)" style=" width: 100%; border-top-right-radius: 100rpx; border-bottom-right-radius: 100rpx;">
						<text>商城购买</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.$base.imgUrl,
				list: {}, // 服务列表
				service_id: [],
				hei: this.$hei,
				tit: [0, 0, 0],
				num: 0
			};
		},
		onShow() {
			this.tit = [0, 0, 0]
			this.service_id = []
			this.num = 0
			this.serviceList() // 获取服务列表
		},
		onLoad(el) {
			 let  scene = decodeURIComponent(el.scene)
			console.log(el.scene,'11111')
			console.log(el)
			if (el.scene != undefined) { //绑定用户上级
				uni.setStorageSync('scene_id', el.scene)
				// this.$api.User_savePid({
				// 	id: el.scene
				// }).then(res=>{
				// 	console.log('1111',res)
				// })
			}
		},
		methods: {
			jishuan(v, is, i) {
				this.num = is === 0 ? this.num + v.sminute : this.num - v.sminute
				this.tit[i] = is === 0 ? this.tit[i] + 1 : this.tit[i] - 1
			},
			fun_service_id() {
				if (this.service_id.length == 0) {
					uni.showToast({
						title: '请选择服务',
						icon: 'none'
					})
				} else {
					let totle = 0,
						text = '',
						text1 = ''
					this.tit.forEach((el, index) => {
						totle = totle + el
						text = text + (el == 0 ? '' :
							`${index==0? '' : 	' | '}${el}个${index==0?'染养':index==1?'剪烫':'美容'}`)
					})
					text = `${totle}个项目：` + text
					text1 = `服务时间：${this.ChangeHourMinutestr(this.num)}`
					let path = this.service_id.join(',')
					uni.navigateTo({
						url: `/orders/choice/choice?time=${text1}&name=${text}&id=${path}`
					})
				}
			},
			ChangeHourMinutestr(str) {
				if (str !== "0" && str !== "" && str !== null) {
					let t = ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
							(Math.floor(str / 60)).toString()),
						fz = ((str % 60).toString().length < 2 ? "0" + (str % 60)
							.toString() : (str % 60).toString())
					let text = `${t==0?'':t+'小时'}${fz==0?'':fz+'分钟'}`
					console.log(text)
					return text
				} else {
					return "";
				}
			},
			// 跳转首页
			goIndex(type) {
				// uni.switchTab({
				// 	url: '/pages/tabBar/home/home'
				// })
				console.log(type)
				if(type == 1){
					uni.navigateTo({
						url: '/pages/tabBar/newService/newService'
					})
				} else {
					uni.switchTab({
						url: '/pages/tabBar/home/home'
					})
				}
			},
			// 获取服务列表
			serviceList() {
				console.log('show,12345678')
				this.list = null
				this.$api.Service_serviceList().then(res => {
					console.log(res,987654321)
					this.list = res.data.data
				})
			},
			// 获取服务id
			serviceId(id, index, type, sminute) {
				this.num = type === 0 ? this.num + sminute : this.num - sminute
				this.tit[index] = type === 0 ? this.tit[index] + 1 : this.tit[index] - 1
				let that = this
				if (type == 0) {
					that.list[index].secondary.filter(e => {
						if (e.id == id) {
							e.type = 1
							that.service_id = that.service_id.concat(id)
						}
					})

				} else {
					that.list[index].secondary.filter(e => {
						if (e.id == id) {
							e.type = 0
						}
					})
					that.service_id.filter((i, index) => {
						if (i == id) {
							that.service_id.splice(index, 1)
						}
					})
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.serviceReservation {
		position: relative;

		.reservationBj {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(180deg, #41967C 0%, rgba(255, 255, 255, 0) 100%);
			position: absolute;
			top: -90rpx;
			z-index: -1;
		}

		.listBox {
			width: 90vw;
			height: auto;
			margin: 40rpx auto;
			// border: 1px solid #F4F4F4;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				background: rgba(80, 165, 139, 0.31);
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				.text {
					color: #45806E;
					font-size: 28rpx;
					font-size: 500;
				}
			}

			.list {
				padding: 30rpx;
				height: auto;
				border-top: 1px solid #F4F4F4;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}

				.list_r {
					width: 60%;
					position: relative;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #3B3B3B;
						margin-bottom: 36rpx;
					}

					.time,
					.frequency {
						color: #959595;
						font-size: 28rpx;
						margin-top: 14rpx;
					}

					.checkbox {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						position: absolute;
						right: 10rpx;
						bottom: 0rpx;
					}
				}
			}

		}

		// .nextStep {
		// 	// margin: 100rpx auto;
		// 	width: 100vw;
		// 	position: fixed;
		// 	left: 0px;
		// 	height: calc(120rpx + constant(safe-area-inset-bottom));
		// 	height: calc(120rpx + env(safe-area-inset-bottom));
		// 	bottom: 0rpx;

		// 	view {
		// 		color: #FFFFFF;
		// 		text-align: center;
		// 		line-height: 88rpx;
		// 		font-weight: 500;
		// 		font-size: 32rpx;
		// 		background-color: #41967C;
		// 		width: 90vw;
		// 		border-radius: 44rpx;
		// 		height: 88rpx;
		// 		margin: 0px auto;
		// 		margin-top: 16rpx;
		// 	}
		// }

	}
	.cart_box_btn {
		width: 100vw;
		height: calc(constant(safe-area-inset-bottom) + 240rpx);
		height: calc(env(safe-area-inset-bottom) + 240rpx);
		// background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 99999;
	
		.view1_btn {
			width: 100%;
			height: 120rpx;
	
			view {
				width: 686rpx;
				height: 80rpx;
				background-color: #45806E;
				border-radius: 50rpx;
	
				text {
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}
	
		}
	}
</style>
